<template>
  <div class="admin-class">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 卡片标题 -->
      <div slot="header" class="clearfix">
        <span>班级列表</span>

        <el-button style="float: right; padding: 3px 0" type="text"
          >批量操作
        </el-button>
        <el-button
          style="float: right; padding: 3px 0; margin-right: 30px"
          type="text"
          @click="openAddClass"
          >新建</el-button
        >
      </div>

      <!-- 卡片内容：  表格数据 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="filterTable"
        height="450px"
      >
        <el-table-column prop="classId" label="classId" width="180">
        </el-table-column>
        <el-table-column prop="className" label="班级名称" width="180">
        </el-table-column>
        <el-table-column prop="classroom" label="教室名称" width="180">
        </el-table-column>
        <el-table-column prop="ht" label="班主任" width="180">
        </el-table-column>
        <el-table-column prop="startDate" label="开班时间" width="180" sortable>
          <template v-slot="scope">
            {{ scope.row.startDate | formatDate }}
          </template>
        </el-table-column>

        <!-- 操作按钮 -->
        <!-- 自定义列 -->
        <el-table-column
          prop="startDate"
          label="操作"
          width="250"
          align="center"
          fixed="right"
        >
          <template v-slot:header>
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template v-slot="scope">
            <el-button size="mini" @click="handleEdit(scope.row)" type="primary"
              >编辑</el-button
            >
            <!-- 删除弹窗  -->
            <el-popconfirm
              title="内容确定删除吗？"
              @confirm="handleDelete(scope.row.classId)"
            >
              <el-button type="danger" slot="reference" size="mini"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 放到表格外面 -->
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="5"
        @current-change="changePage"
        :current-page="page"
      >
      </el-pagination>

      <!-- 编辑班级的弹窗 -->
      <add-class
        class="add-class"
        v-if="isAddClass"
        @closeWindow="closeWindow"
        :Form="ruleForm"
        :isshow="ishsow"
      />
    </el-card>
  </div>
</template>
  

<script>
import addClass from "./adminClassCom/addClass.vue";
import moment from "moment";
import { selectClass, delClass } from "@/api/http.js";
export default {
  name: "adminClass",
  components: { addClass },
  // ----------------------------------------数据
  data() {
    return {
      tableData: [],
      page: 1,
      total: 20, //分页页数
      action: "", //新建还是编辑
      ruleForm: {},
      //控制弹窗显示
      isAddClass: false,
      search: "",
      // 表单中按钮显示，新建和修改显示和隐藏
      ishsow: false,
    };
  },

  //---------------------------------------生命周期-创建
  created() {
    // 项目初始化拉取数据
    this.getData();
  },
  // -----------------------------------------方法
  methods: {
    // 新建
    openAddClass() {
      this.isAddClass = true; //显示表单
      this.ruleForm = {}; //给表单传递一个空对象
      this.ishsow = true; //显示立刻创建按钮，隐藏修改按按钮
    },

    //关闭窗口
    closeWindow(status) {
      this.isAddClass = false;
      this.page = 1;
      this.getData(); //拉取数据
    },

    //初始化获取数据
    async getData() {
      try {
        let res = await selectClass({ page: this.page });
        let { code, list, total } = res.data;
        if (code === 0) {
          this.tableData = list;
          this.total = total;
        }
      } catch (err) {
        console.log("访问异常");
        // console.log('err',err);
      }
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
      this.isAddClass = true;
      this.ishsow = false; // 显示表单中修改按钮，隐藏立即创建按钮
      this.ruleForm = JSON.parse(JSON.stringify(row));
      console.log(this.ruleForm);
    },

    // 删除按钮，删除表中的数据
    handleDelete(id) {
      // console.log(id);
      delClass({
        id: id,
      })
        .then((res) => {
          if (res.data.code === 0) {
            this.$message.success("删除成功");
            this.getData();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //改变页码时候val值是改变页数的索引
    changePage(val) {
      this.page = val;
      this.$refs.filterTable.clearFilter();
      this.getData();
      console.log(val);
    },
  },
  //改变页面
  page() {
    this.page = 1;
  },
  // 过滤器时间
  filters: {
    formatDate(val) {
      return moment(val).format("YYYY-MM-DD");
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-class {
  position: relative;
  width: 100%;
  height: 100%;
}
// .add-class {
//   width: 100%;
//   height: 100%;
//   top: 300px;
//   left: 0;
//   position: absolute;
// }
.el-table {
}
</style>

